<template>
	<view class="bg">
		<view class="" :style="{height: menuTopHeight + 'px'}"></view>
		<view class="menu-box" :style="{height: menuHeight + 'px'}">
			<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
			<view class="navigate-title">医生主页</view>
		</view>
		<view class="bg-circle">
			<u-image width="100%" height="370rpx" src="/static/images/b4.png"></u-image>
		</view>
	</view>
	<view class="container">
		<view class="user-box">
			<view class="userinfo">
				<u-avatar src="/static/images/avatar.png" size="116rpx"></u-avatar>
				<view class="content-box">
					<view class="name-box">
						<view class="name">李医生</view>
						<view class="tag">主任中医师</view>
					</view>
					<view class="name1">儿科专家</view>
				</view>
			</view>
			<view class="skill-box">
				擅长：儿童保健、呼吸、心血管、血液、肾脏、神
 经、内分泌与代谢、免疫感染与消化、内分泌与代谢、免疫感染与消化
			</view>
		</view>

		<!-- 预约挂号 -->
		<view class="title">预约挂号</view>
		<view class="count-list">
			<view class="item" v-for="(item, i) in 10" :key="i">
				<view class="btn">
					<!-- 默认颜色 -->
					<u-button throttleTime="1000" :customStyle="{height: '56rpx', width: '130rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
						color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goConfirm">预约</u-button>
					<!-- 灰色 -->
					<u-button throttleTime="1000" :customStyle="{height: '56rpx', width: '130rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
						color="linear-gradient(315deg, #77797D 0%, #B1B1B1 100%)" @click="goConfirm">预约</u-button>
				</view>
				<view class="date-time">
					<view class="date">2023-10-26 星期二</view>
					<view class="time">8:00-10:00</view>
				</view>
				<view class="acount-box">
					<view class="price">
						<text style="font-size: 28rpx;">￥</text>
						<text>153</text>
					</view>
					<!-- 默认 -->
					<view class="count">余号：18</view>
					<!-- 灰色 -->
					<view class="count gray">余号：18</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		useHeight
	} from '@/hooks/useMenuHeight'
	const {
		menuHeight,
		menuTopHeight
	} = useHeight()

	const goConfirm = () => {
		uni.navigateTo({
			url: '/mine/reservation/add'
		})
	}
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;
		height: 370rpx;
		position: relative;
		.menu-box {
			padding-left: 26rpx;
			color: #fff;
			display: flex;
			align-items: center;

			.navigate-title {
				color: #fff;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-left: 18rpx;
			}
		}

		// z-index: -1;
		.bg-circle {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
	}

	.container {
		position: relative;
		z-index: 19;
		padding: 0 26rpx;
		margin-top: -150rpx;
	}
	.user-box {
		padding: 30rpx 28rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.skill-box {
		margin-top: 14rpx;
		color: #606672;
		line-height: 50rpx;
	}
	.userinfo {
		@include center();
		.content-box {
			flex: 1;
			margin-left: 24rpx;

			.name-box {
				@include start();

				.name {
					font-size: 36rpx;
					color: #222222;
				}

				.tag {
					font-size: 24rpx;
					color: #606672;
					margin-left: 16rpx;
				}
			}

			.name1 {
				color: #516DDB;
				margin-top: 12rpx;
			}
		}
	}
	
	.title {
		color: #222222;
		font-size: 36rpx;
		margin-top: 40rpx;
		margin-bottom: 28rpx;
	}
	.count-list {
		.item {
			position: relative;
			padding: 30rpx 34rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.btn {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 99;
			}
			.date-time {
				@include start();
				.date {
					font-size: 26rpx;
					color: #444444;
				}
				.time {
					color: #444444;
					margin-left: 30rpx;
				}
			}
			.acount-box {
				margin-top: 16rpx;
				@include start();
				color: #D67354;
				.price {
					font-size: 38rpx;
					font-weight: bold;
				}
				.count {
					color: #516DDB;
					margin-left: 38rpx;
				}
				.gray {
					color: #BABABA;
				}
			}
		}
	}
</style>